<template>
  <div class="about">
		<img src="../../public/微信截图_20200912091553.png">
	
	<h5>管理员登录</h5>
	<el-form v-model="loginform">
	  <el-form-item style="width: 100px;">
	    <el-input v-model="loginform.username"></el-input>
	  </el-form-item>
	  <el-form-item style="width: 100px;">
	    <el-input v-model="loginform.password"></el-input>
	  </el-form-item>
	  </el-form>
	  <button @click="add" style="margin: 0 auto;width: 100px;">提交</button>
  </div>
</template>

<script>
	export default {
		data(){
			return {
				loginform : {
					username : "",
					password : ""
				}
			}
		},
		mounted() {
			
		},
		methods:{
			add(){
				this.$axios.post('http://ceshi5.dishait.cn/admin/login',{
					username : this.loginform.username,
					password : this.loginform.password
				}).then(res => {
					console.log(res.data.data.token)
					var token = res.data.data.token
					localStorage.setItem("token",token)
					this.$router.push({
						path:'/'
					})
				}).catch( err => {
					console.log(err)
					 this.$message.error('错了哦，请输入正确的用户名和密码');
				})
			}
		}
	}
</script>

<style scoped>
	img{
		width: 75%;
		height: 100%;
	}
	
	.about{
		display: flex;
	}
	
	.login_container
	{
		width: 100%;
		height: 100vh;
		display: inline-flex;
		justify-content: center;
	}
	
	.login_box_container
	{
		width: 40vw;
		height: 35vh;
		margin-top: 10vh;
		border: 1px solid gainsboro;
	}
	
	.login_box_nav
	{
		width: 100%;
		height: 7vh;
		border: 1px solid gainsboro;
		font-weight: 700;
		font-size: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>